<template>
<div class="iconSwiper">
  <swiper :options="swiperOption" class="swiperWrap">
    <swiper-slide v-for="(page,index) of swiperList" :key="index">
      <ul class="iconList">
        <li v-for="item of page" :key="item.id">
          <img :src="item.imgUrl" />
          <p>{{item.desc}}</p>
        </li>
      </ul>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>
<script>
export default{
  name: 'homeIcon',
  props: {
    iconList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  },
  computed: {
    swiperList: function () {
      var list = []
      for (let i = 0; i <= this.iconList.length / 8; i++) {
        var nullArray = []
        list.push(nullArray)
      }
      for (let i = 0; i <= this.iconList.length - 1; i++) {
        list[parseInt(i / 8)].push(this.iconList[i])
      }
      return list
    }
  }
}
</script>
<style lang="scss" scoped>
.iconSwiper{
  width: 100%;
  height: 4.4rem;
  .swiperWrap{
    height: 4.4rem;
  }
}
.iconList{
  width: 100%;
  height: 4rem;
  overflow: hidden;
  li{
    width: 25%;
    height: 1.8rem;
    float: left;
    text-align: center;
    padding-top: .2rem;
    img{
      width: 1.2rem;
    }
    p{
      line-height: .5rem;
    }
  }
}
</style>
